<template>
	<view class="container">
		<loading :show="loading_show"></loading>
		<move-button
			:show="returnTop_show"
			:navi_Height="naviHeight"
			:background="_temp_themeColor"
			:defaultBottom="280"
			:defaultRight="20"
			@returnTop="returnTop"
		>
		</move-button>
		<!-- <customHead
			title="商品详情"
			titlePaddingLeft="30"
			navi_background="#fff"
			:placeholder="true"
			:isShowBackArrow="true"
		>	
		</customHead> -->
		<view class="content_main">
			<view class="content_swiper" v-if="goodsDetail.rotationImgsJson && goodsDetail.rotationImgsJson.length">
				<swiper class="swiper" :indicator-dots="goodsImgArr.length < 2? false: true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item, index) in goodsImgArr" :key="index">
						<video
							v-if="checkMediaType(item)=='video'" 
							id="myVideo"
							:src="item"
							style="width: 100%;height:100%;margin: auto 0;"
						></video>
						<image v-else class="image" :src="item" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="content_swiper" v-else>
				<view class="swiper">
					<image class="image" :src="goodsDetail.previewUrl" mode="aspectFill"></image>
				</view>
			</view>
			
			<view class="Specification_selected common" @click="submitPopup('')" v-if="selectedSpec">
				<view class="Specifications-left">
					<view class="select">已选</view>
					<view class="Specifications-text">
						<text class="selected-text">
							{{selectedSpec}}
						</text>
					</view>
				</view>
				<u-icon name="arrow-right" size="14"></u-icon>
			</view>
			
			<view class="goods-introduce common">
				<view class="goods-price">
					<view class="now-price" v-if="goodsDetail.goodsType==0">
						<text class="price-icon" >￥</text>
						{{countPriceTotal || ''}}
					</view>
					<view class="now-price" v-if="goodsDetail.goodsType==1">
						{{countPriceTotal || ''}}
						<text class="price-icon" >积分</text>
					</view>
					<view class="now-price" v-if="goodsDetail.goodsType==2">
						<text class="price-icon" >￥</text>
						{{countPriceTotal || ''}}
					</view>
					<view class="old-price" v-if="goodsDetail.scribePrice>0">
						￥{{goodsDetail.scribePrice || ''}}
					</view>
				</view>
				<view class="goodsName">
					{{goodsDetail.goodsName || ''}}
				</view>

				<view class="sales">
					<view class="salesTitle">
						<view class="" v-if="goodsDetail.stockNum>0" >
							库存充足
						</view>
						<view class="" v-else >
							库存不足
						</view>
					</view>
					<view class="share_add">
						<view class="label" @click="shareBox()">
							<aicon type="forward" size="21" color="#999"></aicon>
							<span>分享</span>
						</view>
						<view class="label" @click="addCollect()">
							<aicon v-if="is_collect" type="favorfill" size="22" :color="_temp_themeColor" ></aicon>
							<aicon v-else type="favor" size="22" color="#999"></aicon>
							<span>{{is_collect?'取消':'收藏'}}</span>
						</view>
					</view>
				</view>
			</view>
			
			<view class="detail-img common" v-if="goodsDetail.goodsDetailsJson!==''" >
				<view class="detail-img-text">
					<view class="detail-img-title">
						商品详情
					</view>
				</view>
				<view class="detail-content">
					<u-parse :content="goodsDetail.goodsDetailsJson" ></u-parse>
				</view>
			</view>
			
			<view class="detail-bottom">
				<view class="detail-bottom-left">
					<view class=" collect home">	
						<aicon type="servicefill" size="22" color="#999"></aicon>
						<text>客服</text>
						<button open-type="contact" class='btn'></button>
					</view>
					<view class="collect home" @click="gotoCart">
						<aicon type="cartfill" size="22" color="#999"></aicon>
						<text>购物车</text>
					</view>
				</view>
				<view class="detail-bottom-right">
					<view class="addcart cartHeight" :style="{'color':_temp_themeColor,border:`1rpx solid ${_temp_themeColor}`}" @click="submitPopup('addCart')">
						加入购物车
					</view>
					<view class="buy cartHeight" :style="{'background':_temp_themeColor}" @click="submitPopup('buy')">
						立即购买
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="shows" mode="bottom" @close="select_close" @touchmove.stop.prevent="">
			<view class="Specifications">
				<!-- <view class="Specifications-mask"></view> -->
				<view class="Specifications-popup">
					<view class="Specifications-popup-colse cuIcon-roundclose" @click="select_close">
						<u-icon name="close-circle" size="24"></u-icon>
					</view>
					<view class="Specifications-popup-head">
						<view class="Specifications-popup-head-img">
							<image class="image" v-if="selectSpecObj.specificationImages" mode="aspectFill" :src="selectSpecObj.specificationImages"></image>
							<image class="image" v-else mode="aspectFill" :src="goodsDetail.previewUrl"></image>
						</view>
						<view class="Specifications-popup-head-text">
							<view class="goods_name">
								<text>{{goodsDetail.goodsName || ''}}</text>
							</view>
							<view class="" v-if="selectSpecObj.id">
								<view class="Specifications-popup-head-text-price"><label
									for="">¥</label><text>{{countPriceTotal || ''}}</text>
								</view>
								<view class="Specifications-popup-head-text-parameter">
									<text class="text">库存：{{selectSpecObj.stockNum}}</text>
								</view>
							</view>
							<view class="" v-else>
								<view class="Specifications-popup-head-text-price"><label
									for="">¥</label><text>{{goodsDetail.goodsPrice * goodsNum}}</text>
								</view>
								<view class="Specifications-popup-head-text-parameter">
									<text>库存：{{goodsDetail.stockNum}}</text>
								</view>
							</view>
							
							<view class="goods_desc">
								<text>{{goodsDetail.goodsRemarks}}</text>
							</view>
						</view>
					</view>
					<scroll-view scroll-y class="Specifications-huadong" v-if="spec_name_list.length > 0">
						<view class="Specifications-popup-sele" v-for="(item1, index1) in spec_name_list" :key="index1">
							<view class="Specifications-popup-sele-name">{{item1.name}}</view>
							<view class="Specifications-popup-sele-list">
								<text 
									:style="{color: item2.selectFlag? _themeColor:'', border: item2.selectFlag?`3rpx solid ${_temp_themeColor}`:''}"
									:class="item2.selectFlag ?'rmoiu':'' "
									@click="selectSpecItem(index1, index2)"
									v-for="(item2, index2) in item1.children"
									:key="index2"
								>
									{{item2.attributeValue}}
								</text>
							</view>
						</view>
					</scroll-view>
					<view class="Specifications-popup-munbar">
						<view class="Specifications-popup-munbar-name">购买数量</view>
						<view class="redmunber">
							<u-number-box v-model="goodsNum" :min="1" :max="maxGoodsNum">
								<view slot="minus" class="minus _clickOpacity">
									<u-icon name="minus-circle" size="20"></u-icon>
								</view>
								<input type="text" slot="input" v-model="goodsNum" style="width: 80rpx;text-align: center;border: none;" >
								<view slot="plus" class="plus _clickOpacity">
									<u-icon name="plus-circle" :color="_temp_themeColor" size="20"></u-icon>
								</view>
							</u-number-box>
						</view>
					</view>
					<view class="Specifications-popup-but" v-if="payType">
						<view v-if="payType === 'addCart'" :style="{color: _temp_themeColor, border: `3rpx solid ${_temp_themeColor}`}" class="buy label" @click="addCart"> 加入购物车</view>
						<view v-if="payType == 'buy'" :style="{background: lightColor}" class="addcart label" @click="buyImmediately">立即购买</view>
					</view>
					<view class="Specifications-popup1" v-else>
						<view class="addcart label" :style="{color: _temp_themeColor, border: `3rpx solid ${_temp_themeColor}`}" @click="addCart"> 加入购物车</view>
						<view class="buy label" :style="{background: lightColor}" @click="buyImmediately">立即购买</view>
					</view>
				</view>
			</view>
		</u-popup>
		<shareCover :show="shareCoverShow" :goodsData="goodsDetail" @closeShare="shareCoverShow = false"></shareCover>
		<shareToFriends ref="shareToFriends"></shareToFriends>
	</view>
</template>

<script>
	import {
		searchPlugsGoodsById,
		searchPlugsGoodsSpecificationByGoodsId,
		insertPlugsShopCart,
		insertPlugsCollect,
		searchPlugsCollectByUserId,
		cancelCollectByDataId,
		insertPlugsFootmark
	} from '@/tools/request/api.js'
	import { makeContrast, makeLightColor } from '@/tools/utils/colorful.js'
	import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
	
	export default {
		data() {
			return {
				loading_show: false,
				goodsDetail: {},
				goodsId: 0,
				specificationInfo: [],
				spec_name_list: [],
				specIndex1: 0,
				specIndex2: 0,
				selectedSpec: '',
				selectSpecObj: {},
				goodsNum: 1,
				payType: '',
				goodsImgArr: [],
				shows: false,
				collectList: [],
				is_collect: false,
				returnTop_show: false,
				shareShow: false,
				shareCoverShow: false,
				returnTop_show_origin: false
			};
		},
		onLoad (option) {
			this.goodsId = option.id;
			this.getGoodsDetail();
			this.saveLateLyGoodsIds();
		},
		async onShareAppMessage () {
			let params = {
				storeImg: this.storeInfo.businessLogo,	//店铺logo
				goodsName: this.goodsDetail.goodsName,	//商品名称
				goodsImg: this.goodsDetail.rotationImgsJson[0],	//商品主图
				price: this.goodsDetail.goodsPrice,	//商品价格
				themeColor: this._temp_themeColor	//主题色
			}
			let shareUrl = await this.$refs.shareToFriends.startRender(params);
			return {
			    title: this.storeInfo.businessName,
			    path: `/subpack_category/goodsDetail/goodsDetail?id=${this.goodsDetail.id}`,
			    imageUrl: shareUrl
			}
		},
		computed: {
			maxGoodsNum () {
				if (this.selectedSpec) {
					return this.selectSpecObj.stockNum;
				} else {
					return Math.min(this.goodsDetail.stockNum, this.goodsDetail.limitNum);
				}
			},
			lightColor () {
				let light_color = makeLightColor(this._temp_themeColor, 0.2);
				let linearBack = `linear-gradient( to right, ${this._temp_themeColor}, ${light_color})`;
				return linearBack;
			},
			countPriceTotal () {
				let price = 0;
				if (this.selectSpecObj.id) {
					price = Math.round(this.selectSpecObj.dealPrice * 100) / 100;
				} else {
					price = this.goodsDetail.goodsPrice;
				}
				let total = price * this.goodsNum;
				total = Math.round(total * 100) / 100;
				return total;
			}
		},
		methods: {
			...mapMutations('pay_store', ['SET_SHOP_CART_LIST']),
			// 将最近浏览的商品储存在本地
			saveLateLyGoodsIds () {
				let historyGoodsIds = uni.getStorageSync('historyGoodsIds');
				if (Array.isArray(historyGoodsIds) && historyGoodsIds.length) {
					historyGoodsIds.unshift(this.goodsId);
					if (historyGoodsIds.length > 50) {
						historyGoodsIds.pop();
					}
					uni.setStorageSync('historyGoodsIds', historyGoodsIds);
				} else {
					uni.setStorageSync('historyGoodsIds', [this.goodsId]);
				}
			},
			// 插入足迹
			insetFootmark () {
				let postData = {
					  "adminId": this.adminId,
					  "businessId": this.businessId,
					  "dataId": this.goodsDetail.id,
					  "goodsName": this.goodsDetail.goodsName,
					  "goodsPrice": this.goodsDetail.goodsPrice,
					  "previewUrl": this.goodsDetail.previewUrl,
					  "types": 0,
					  "userId": this.userId,
					  "userServiceToken": this.userServiceToken
				}
				insertPlugsFootmark(postData);
			},
			// 分享
			shareBox(){
				if(!this.accessToken){
					return uni.navigateTo({url: '/subpack_login/login/login'});
				} else {
					// this.shareShow = !this.shareShow;
					this.shareCoverShow = !this.shareCoverShow;
				}
			},
			gotoHome () {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			gotoCart () {
				uni.navigateTo({
					url: '/subpack_category/cart/cart'
				})
			},
			getcollectList() {
				let postdata = {
					businessId: this.businessId,
					page: 1,
					size: 999
				}
				searchPlugsCollectByUserId(postdata).then(res => {
					this.loading_show = false;
					if (res.code == 200) {
						let list2 = res.body.list;
						this.collectList = list2.filter(itm => itm.dataId === this.goodsDetail.id);
						if (this.collectList.length > 0) {
							this.is_collect = true;
						}
					}
				})
			},
			// 添加收藏
			addCollect () {
				if (!this.accessToken) {
					uni.showModal({
						title: '提示',
						content: '登录才能添加宝贝哦~',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/subpack_login/login/login'
								});
							} else if (res.cancel) {
							}
						}
					});
					return;
				}
				if (this.is_collect) return this.cancelOften();
				let postdata = {
					businessId: this.businessId,
					dataId: this.goodsDetail.id,
					types: 0,
				}
				insertPlugsCollect(postdata).then(res => {
					if (res.code != 200) return uni.$showMsg();
					this.is_collect = true;
					uni.showToast({
						title: '收藏成功'
					})
				})
			},
			// 取消收藏
			cancelOften () {
				let postdata = {
					businessId: this.businessId,
					dataId: this.goodsDetail.id,
					dataType: 0,
				}
				cancelCollectByDataId(postdata).then(res => {
					if (res.code != 200) return uni.$showMsg();
					this.is_collect = false;
					uni.showToast({
						title: '取消收藏'
					})
				})
			},
			// 获取商品信息
			getGoodsDetail () {
				this.loading_show = true;
				searchPlugsGoodsById(this.goodsId).then(res => {
					if (res.code == 200) {
						let goodsImg = [];
						if (res.body.rotationImgsJson) {
							goodsImg = JSON.parse(res.body.rotationImgsJson);
							res.body.rotationImgsJson = JSON.parse(res.body.rotationImgsJson);
						}
						if(res.body.videoUrl && res.body.videoUrl != null){
							goodsImg.unshift(res.body.videoUrl)
						}
						this.goodsImgArr = goodsImg;
						this.goodsDetail = res.body;
						this.getGoodsSpecification();
						this.getcollectList();
						this.insetFootmark();
					}
				})
			},
			checkMediaType(url) {
				// 获取文件扩展名
				var extension = url.split('.').pop().toLowerCase();
				var imageExtensions = ['jpg', 'jpeg', 'gif', 'png'];
				var videoExtensions = ['mp4', 'wmv', 'avi', 'mov'];
				// 判断图片
				if (imageExtensions.includes(extension)) {
					  return 'image';
				}
				// 判断视频
				if (videoExtensions.includes(extension)) {
					  return 'video';
				}
				// 扩展名不在图片或视频数组中，返回null
				return null;
			},
			submitPopup (type) {
				this.shows = true;
				this.payType = type;
				this.returnTop_show_origin = this.returnTop_show;
				this.returnTop_show = false;
			},
			select_close () {
				this.shows = false;
				this.returnTop_show = this.returnTop_show_origin;
			},
			// 选择规格
			selectSpecItem (index1, index2) {
				this.goodsNum = 1;
				this.spec_name_list[index1].children.forEach((item, index) => {
					item.selectFlag = index2 == index ? true : false;
				});
				this.countPrice();
			},
			// 选择规格时计算价格
			countPrice () {
				let name = '';
				let value = '';
				let selected = [];
				let selectObj = {};
				this.spec_name_list.forEach((item, index) => {
					let result = item.children.find((item1, index1) => {
						return item1.selectFlag;
					});
					name = item.name;
					value = result.attributeValue;
					selected.push(name + '：' + value);
					selectObj[name] = value;
				});
				this.selectedSpec = selected.join('，');
				let item = this.specificationInfo.find((item) => {
					let obj = item.specificationName;
					obj = JSON.parse(obj);
					let obj2 = {};
					let ret = Object.assign(obj2, obj);
					return this.isObjectValueEqual(ret, selectObj);
				});
				this.selectSpecObj = item;
			},
			// 对比两个对象的值是否完全相等 返回值 true/false
			isObjectValueEqual (a, b) {   
				//取对象a和b的属性名
				var aProps = Object.getOwnPropertyNames(a);
				var bProps = Object.getOwnPropertyNames(b);
				//判断属性名的length是否一致
				if (aProps.length != bProps.length) {
					return false;
				};
				//循环取出属性名，再判断属性值是否一致
				for (var i = 0; i < aProps.length; i++) {
					var propName = aProps[i];
					if (a[propName] !== b[propName]) {
						return false;
					};
				};
				return true;
			},
			// 获取商品规格
			getGoodsSpecification () {
				searchPlugsGoodsSpecificationByGoodsId({
					goodsId: this.goodsId
				}).then(res => {
					if (res.code == 200) {
						let spec_list = res.body.plugsGoodsSpecificationList;
						let spec_name_list = res.body.specificationInfo;
						if (!spec_list.length || !spec_name_list) return;
						this.specificationInfo = spec_list;
						let specifications = [];
						spec_name_list.forEach((item, index) => {
							let key = Object.keys(item)[0];
							specifications.push({
								name: key,
								children: []
							})
							item[key].forEach((item1, index1) => {
								item1.selectFlag = index1 ? false:true;
								specifications[index].children.push(item1);
							})
						})
						this.spec_name_list = specifications;
						this.countPrice();
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'error'
						})
					}
				})
			},
			addCart () {
				let postData = {
					goodsId: this.goodsDetail.id,
					goodsCategoryId: this.goodsDetail.categoryId.toString(),
					goodsNum: this.goodsNum,
					goodsSpecificationIds: this.selectSpecObj.id,
					businessId: this.businessId
				};
				insertPlugsShopCart(postData).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '加入成功',
							duration: 1000
						})
						this.shows = false;
						this.getShopCartList();
					} else {
						uni.showToast({
							title: '加入失败',
							duration: 1000,
							icon: 'error'
						})
					}
				})
			},
			buyImmediately () {
				if (this.selectedSpec) {
					if (this.selectSpecObj.stockNum < 1) {
						return uni.$showMsg('库存不足');
					}
				} else {
					if (this.goodsDetail.stockNum < 1) {
						return uni.$showMsg('库存不足');
					}
				}
				this.shows = false;
				let goodsSpecificationIds = []
				let goodsSpecification = [];
				
				let postData = {
					goodsId: this.goodsDetail.id,
					previewUrl: this.goodsDetail.previewUrl,
					goodsPrice: this.selectedSpec? this.selectSpecObj.dealPrice: this.goodsDetail.goodsPrice,
					goodsCategoryId: this.goodsDetail.categoryId,
					goodsNum: this.goodsNum,
					goodsSpecificationIds: this.selectSpecObj.id,
					goodsSpecification: this.selectSpecObj.id?[this.selectSpecObj]:[],
					businessId: this.businessId,
					distributionFee: this.goodsDetail.distributionFee,
					goodsName: this.goodsDetail.goodsName,
					plugsGoods:this.goodsDetail,
					userId: uni.getStorageSync('__ddminiUserInfo').id || 0
				};
				
				
				// 将要下单的商品信息提交到store
				this.SET_SHOP_CART_LIST([postData]);
				
				// return;
				
				uni.setStorage({
					key: '__ddminiShopCart',
					data: [postData]
				});
				
				if (this.accessToken) {
					uni.setStorage({
						key: '__ddminiShopCart',
						data: [postData]
					});
					uni.navigateTo({
						url: '/pages/order/payEnter/payEnter?score=0'
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '登录才能购买宝贝哦~',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/subpack_login/login/login'
								})
							} else if (res.cancel) {}
						}
					});
				}
			},
			// 回到顶部
			returnTop () {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			},
		},
		onPageScroll (e) {
			if (this.shows) return;
			if (e.scrollTop >= 900) {
				if (!this.returnTop_show) {
					this.returnTop_show = true;
					this.returnTop_show_origin = true;
				}
			} else {
				if (this.returnTop_show) {
					this.returnTop_show = false;
					this.returnTop_show_origin = false;
				}
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100vw;
		padding-bottom: 220rpx;
		
		.returnTopImg{
			width: 80rpx;
			height: 80rpx;
		}
		
		.content_main{
			padding: 0 20rpx;
			
			.content_swiper{
				border-radius: 20rpx;
				overflow: hidden;
				box-sizing: border-box;
				border-radius: 20rpx;
				overflow: hidden;
				
				.swiper{
					width: 100%;
					height: 600rpx;
					
					.image{
						width: 100%;
						height: 600rpx;
						border-radius: 20rpx;
					}
				}
			}
			
			.Specification_selected {
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 26rpx;
				height: 120rpx;
				background-color: #fff;
				border-radius: 20rpx;
				margin: 20rpx auto;
				
				.Specifications-left {
					display: flex;
					align-items: center;
		
					.select {
						color: #000;
						margin-right: 26rpx;
					}
				}
			}
			
			.goods_desc{
				display: flex;
				flex-direction: column;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 20rpx;
				padding: 30rpx;
				
				.totalprice{
					padding-bottom: 30rpx;
					color: #ff5831;
					font-size: 36rpx;
					font-weight: bold;
					
					.scribePrice{
						color: #787878;
						text-decoration: line-through;
						padding-left: 10rpx;
						font-size: 26rpx;
						font-weight: normal;
					}
				}
				
				.title{
					font-weight: bold;
					padding-bottom: 20rpx;
				}
				.grand{
					display: flex;
					justify-content: space-between;
					padding: 20rpx 0;
					
					.item{
						display: flex;
						flex-direction: column;
						
						.item_tit{
							font-size: 28rpx;
							padding-bottom: 10rpx;
						}
						.item_desc{
							color: #888888;
							font-size: 28rpx;
						}
					}
				}
				.desc{
					padding: 20rpx 0;
					font-size: 30rpx;
					color: #626262;
				}
				.stockNum{
					font-size: 26rpx;
					color: #adadad;
					padding-top: 20rpx;
					border-top: 1rpx solid #ddd;
					margin-top: 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.share_add{
						display: flex;
						align-items: center;
						
						.label{
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-between;
							font-size: 26rpx;
							margin: 0 20rpx;
						}
					}
				}
			}
			.common {
				width: 96%;
				background-color: #fff;
				border-radius: 16rpx;
			}
			.goods-introduce {
				padding: 0rpx 26rpx;
				margin: 20rpx auto;
				box-sizing: border-box;
	
				.goods-price {
					display: flex;
					align-items: center;
					padding: 40rpx 0 30rpx;
					.now-price {
						color: #ff4544;
						font-size: 42rpx;
						font-weight: bold;
						margin-right: 30rpx;
	
						.price-icon {
							font-weight: bold;
							font-size: 26rpx;
						}
					}
	
					.old-price {
						color: #999999;
						text-decoration: line-through;
						font-size: 28rpx;
					}
				}
	
				.goodsName {
					font-size: 34rpx;
					// overflow: hidden;
					// white-space: normal;
					// text-overflow: ellipsis;
					font-weight: bold;
					margin: 16rpx 0;
					display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
					-webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式
					-webkit-line-clamp: 2; //一个块元素显示的文本的行数
					overflow: hidden; //溢出隐藏
					// border-bottom: 1rpx solid #f2f2f2;
					padding-bottom: 20rpx;
					
				}
				.goodsRemarks{
					padding-bottom: 20rpx;
				}
				.member {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 80rpx;
					padding: 0 12rpx;
					box-sizing: border-box;
					border-radius: 16rpx;
					background-color: #faf2d8;
	
					.member-price {
						color: #ff4544;
						font-weight: bold;
					}
				}
	
				.sales {
					color: #a3a3a3;
					font-size: 26rpx;
					// margin-top: 20rpx;
					padding: 20rpx 0;
					display: flex;
					justify-content: space-between;
					border-top: 1px solid #efefef;
					
					.share_add{
						display: flex;
						align-items: center;
						
						.label{
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-between;
							font-size: 26rpx;
							margin: 0 20rpx;
						}
					}
					
					.salesTitle{
						color:#19be6b;
						display:flex;
						align-items: center;
					}
				}
			}
			
			.send_methods{
				padding: 0 30rpx;
				box-sizing: border-box;
				margin-top: 20rpx;
				
				.title{
					padding-right: 20rpx;
				}
				.desc{
					color: #737373;
				}
			}
			.params{
				padding: 0 30rpx;
				margin-top: 80rpx;
				margin-bottom: 30rpx;
				
				.title{
					display: flex;
					align-items: center;
				}
				.main{
					border: 1rpx solid #e6e6e6;
					border-radius: 20rpx;
					margin-top: 20rpx;
					
					.item{
						border-bottom: 1rpx solid #e6e6e6;
						padding: 10rpx 20rpx;
						display: flex;
						align-items: center;
						
						.title{
							width: 200rpx;
							font-size: 30rpx;
							color: #757575;
						}
						.desc{
							font-size: 30rpx;
						}
					}
				}
			}
			.detail-img {
				padding-bottom: 120rpx;
				margin: 30rpx auto;
				background-color: #fff;
				border-radius: 20rpx;
				padding-left: 20rpx;
				padding-right: 20rpx;
				box-sizing: border-box;
	
				.detail-img-text {
					height: 100rpx;
					display: flex;
					justify-content: center;
					align-items: center;
	
					.detail-img-title {
						margin: 0 40rpx;
						font-weight: bold;
						font-size: 34rpx;
					}
				}
			}
			
			.detail-bottom {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: fixed;
				bottom: 0;
				left: 0;
				height: 120rpx;
				background-color: #fff;
				box-sizing: border-box;
				padding: 0 40rpx;
	
				.detail-bottom-left {
					display: flex;
					
					.btn{
						position: absolute;
						top: 0;
						left: 0;
						width: 12%;
						height: 100%;
						opacity: 0;
					}
	
					.home {
						display: flex;
						flex-direction: column;
						align-items: center;
						color: #a3a3a3;
						font-size: 26rpx;
						margin-right: 32rpx;
					}
				}
	
				.detail-bottom-right {
					display: flex;
	
					.cartHeight {
						width: 220rpx;
						height: 70rpx;
						text-align: center;
						line-height: 70rpx;
						color: #fff;
					}
	
					.addcart {
						border: 3rpx solid #ff5831;
						color: #ff5831;
						border-radius: 40rpx 0 0 40rpx;
						box-sizing: border-box;
					}
					
					.buy {
						background-color: #ff5831;
						border-radius: 0 40rpx 40rpx 0;
					}
				}
			}
			
			.share_box{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 400rpx;
				.label{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					flex: 1;
					padding: 30rpx 0 0;
					position: relative;
					span{
						color: #1c1c1c;
						font-size: 26rpx;
						padding-top: 6rpx;
					}
					button{
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;
						opacity: 0;
					}
				}
			}
		}
		.Specifications {
			width: 100%;
			position: fixed;
			background-color: #fff;
			bottom: 0px;
			left: 0px;
			z-index: 999;
			
			.Specifications-mask {
				width: 100%;
				height: auto;
				position: fixed;
				top: 0rpx;
				bottom: 0rpx;
				left: 0rpx;
				right: 0rpx;
				margin: 0rpx auto;
				background: rgba(0, 0, 0, 0.4);
				z-index: 1000;
			}
			.Specifications-popup {
				width: 100%;
				height: auto;
				position: fixed;
				bottom: 0rpx;
				left: 0rpx;
				right: 0rpx;
				z-index: 1001;
				background: #fff;
				border-radius: 10rpx 10rpx 0rpx 0rpx;
				
				.Specifications-popup-colse {
					position: absolute;
					top: 12rpx;
					right: 14rpx;
					font-size: 30rpx;
					color: #999;
					z-index: 1002;
				}
				.Specifications-popup-head {
					width: 94%;
					height: auto;
					margin: 0rpx auto;
					border-bottom: 3rpx #eee solid;
					display: flex;
					flex-direction: row;
					padding: 20rpx 0rpx;
					margin-top: 40rpx;
					
					.Specifications-popup-head-img {
						
						.image {
							width: 200rpx;
							height: 200rpx;
							border: 3rpx #eee solid;
							display: block;
						}
					}
					.Specifications-popup-head-text {
						width: 75%;
						display: flex;
						flex-direction: column;
						box-sizing: border-box;
						padding-left: 3%;
						justify-content: space-around;
						
						.goods_name{
							font-size: 34rpx;
							font-weight: bold;
							width: 100%;
							padding-right: 40rpx;
							box-sizing: border-box;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						
						.goods_desc{
							width: 100%;
							font-size: 24rpx;
							padding-right: 40rpx;
							box-sizing: border-box;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							color: #8a8a8a;
						}
						
						.Specifications-popup-head-text-price {
							display: flex;
							flex-direction: row;
							color: #ff5831;
							font-weight: bold;
							display: table-cell;
							vertical-align: bottom;
							
							label {
								font-size: 24rpx;
								font-weight: bold;
								margin-right: 2%;
							}
							
							text {
								font-size: 36rpx;
							}
						}
						.Specifications-popup-head-text-parameter {
							font-size: 26rpx;
							color: #888;
							
							.text {
								margin-right: 3%;
							}
						}
					}
				}
				.Specifications-huadong {
					width: 100%;
					max-height: 600rpx;
					padding-top: 20rpx;
					
					.Specifications-popup-sele {
						width: 100%;
						height: auto;
						box-sizing: border-box;
						padding: 0rpx 3%;
						
						.Specifications-popup-sele-name {
							width: 100%;
							height: auto;
							font-size: 30rpx;
							color: #333;
							margin-bottom: 30rpx;
							margin-top: 30rpx;
						}
						.Specifications-popup-sele-list {
							width: 100%;
							height: auto;
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							
							text {
								color: #131315;
								margin: 0rpx 0%;
								border-radius: 16rpx;
								text-align: center;
								box-sizing: border-box;
								min-width: 20%;
								// border: 3rpx #cdcdcd solid;
								background-color: #f2f2f4;
								margin-bottom: 30rpx;
								font-size: 24rpx;
								line-height: 50rpx;
								padding: 6rpx 2%;
								margin-right: 3%;
							}
						}
						
						
					}
				}
				.Specifications-popup-munbar {
					width: 100%;
					height: auto;
					box-sizing: border-box;
					padding:0 5%;
					display: flex;
					justify-content: space-between;
					margin: 100rpx 0;
				}
				.Specifications-popup-but {
					width: 100%;
					height: auto;
					display: flex;
					justify-content: space-between;
					padding-top: 40rpx;
					padding-left: 50rpx;
					padding-right: 50rpx;
					// padding-bottom: env(safe-area-inset-bottom);
					padding-bottom: 68rpx;
					box-sizing: border-box;
					border-top: 3rpx #eee solid;
				
					.addcart {
						// background-color: #01cb88;
					}
				
					.buy {
						// background-color: #01cb88;
					}
					.label{
						text-align: center;
						border-radius: 80rpx;
						color: #fff;
						width: 100%;
						line-height: 80rpx;
					}
				}
				.Specifications-popup1{
					width: 100%;
					display: flex;
					padding-top: 40rpx;
					padding-left: 50rpx;
					padding-right: 50rpx;
					padding-bottom: 68rpx;
					box-sizing: border-box;
					border-top: 3rpx #eee solid;
					overflow: hidden;
					display: flex;
					justify-content: center;
					align-items: center;
					
					.addcart {
						width: 45%;
						border-radius: 40rpx 0 0 40rpx;
						box-sizing: border-box;
					}
					
					.buy {
						color: #fff;
						width: 45%;
						border-radius: 0 40rpx 40rpx 0;
						box-sizing: border-box;
						padding: 3rpx 0;
					}
					.label{
						text-align: center;
						line-height: 80rpx;
					}
				}
			}
		}
	}
</style>
